<template>
  <div id="commodityConfig">
    <h1 class="con-right-title">
      积分兑换中心
    </h1>
    <!-- 搜索 -->
    <top-search @toSearch="toSearch"></top-search>
    <div class="table-conBtn">
      <el-button
        type="warning"
        icon="el-icon-plus"
        @click="commodityConfig('add')"
      >
        新增
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table :data="tableData">
      <el-table-column label="序号" type="index" min-width="100" align="center">
      </el-table-column>
      <el-table-column
        label="商品名称"
        prop="cardName"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column label="商品类型" min-width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.type | filterName('Integral_commodity_type') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品缩略图" min-width="100" align="center">
        <template slot-scope="{ row }">
          <listImgString :imgInfo="row.cardPicture"></listImgString>
        </template>
      </el-table-column>
      <el-table-column
        label="商品有效期"
        prop="endTime"
        min-width="100"
        align="center"
        :formatter="formatterEndTime"
      >
      </el-table-column>
      <el-table-column label="卡面额" min-width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.cardDenomination / 100 }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="适用商品"
        prop="usableShop"
        min-width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column label="库存" min-width="80" align="center">
        <template slot-scope="{ row }">
          <span :style="{ color: row.stock ? '' : 'red' }">{{
            row.stock
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="所需兑换积分"
        prop="point"
        min-width="90"
        align="center"
      ></el-table-column>
      <el-table-column
        label="创建时间"
        prop="createTime"
        min-width="120"
        align="center"
      ></el-table-column>
      <el-table-column
        label="最后一次编辑时间"
        prop="updateTime"
        min-width="120"
        align="center"
      ></el-table-column>
      <el-table-column label="操作人" min-width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.updateBy.trueName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" min-width="120">
        <template slot-scope="{ row }">
          <el-button
            type="text"
            @click="editStatus('disable', row)"
            v-show="row.status === 'PUTAWAY'"
          >
            下架
          </el-button>
          <el-button
            type="text"
            @click="editStatus('enable', row)"
            v-show="row.status === 'SOLDOUT'"
          >
            上架
          </el-button>
          <el-button type="text" @click="commodityConfig('edit', row)">
            编辑
          </el-button>
          <el-button type="text" @click="delCommodity(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <!-- 新增编辑弹窗 -->
    <addEditDialog
      v-if="dialogData.isShow"
      :dialog-data="dialogData"
      @refresh="refresh"
    ></addEditDialog>
  </div>
</template>

<script>
import topSearch from './topSearch'
import addEditDialog from './addEditDialog'
import {
  getCommodity,
  commoditysDisable,
  commoditysEnable,
  deleteCommodity
} from '@/api/integralExchange/commodityConfig'
import { sysNormalDisable } from '@utils/dictionariesFunc'
import listImgString from '@common/listImgString'
export default {
  components: {
    topSearch,
    addEditDialog,
    listImgString
  },
  data() {
    return {
      tableData: [],
      total: 0,
      searchParams: {
        pageNum: 1,
        pageSize: 10
      },
      dialogData: { isShow: false }
    }
  },
  async mounted() {
    await sysNormalDisable('Integral_commodity_type', 'Integral_commodity_type')
    this.searchList()
  },
  methods: {
    /* 列表 */
    searchList() {
      getCommodity(this.searchParams, (res) => {
        this.tableData = res.rows
        this.total = res.total
      })
    },
    /* 搜索 */
    toSearch(val) {
      this.searchParams.pageNum = 1
      Object.assign(this.searchParams, val)
      this.searchList()
    },
    /* 商品上下架 */
    editStatus(type, row) {
      if (type === 'disable') {
        commoditysDisable(row.id, {}, () => {
          this.$message.success('商品下架成功')
          this.searchList()
        })
      } else {
        if (!row.stock) {
          this.$message.warning('库存不足')
          return
        }
        commoditysEnable(row.id, {}, () => {
          this.$message.success('商品上架成功')
          this.searchList()
        })
      }
    },
    /* 删除商品 */
    delCommodity({ id }) {
      this.$confirm('是否确认从列表中删除此商品', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteCommodity(id, {}, () => {
            this.searchList()
          })
        })
        .catch(() => {})
    },
    /* 新增编辑商品 */
    commodityConfig(type, row) {
      if (type === 'add') this.dialogData = { isShow: true, type }
      else {
        const { id, status } = row
        this.dialogData = { isShow: true, type, id, status }
      }
    },
    /* 新增编辑后刷新列表 */
    refresh() {
      this.searchList()
    },
    /* 有效期格式化 */
    formatterEndTime(row) {
      return row.endTime.includes('9999') ? '永久有效' : `截止至${row.endTime}`
    }
  }
}
</script>
<style lang="less" scoped></style>
